<template>
  <div class="database_wrap">
    <div class="left">
      <div class="itemLeft">
        <div class="itemLefthead">
          元数据标准
          <!-- <el-button
            class="bin_button"
            size="small"
            @click="adddialogshow"
            icon="el-icon-circle-plus"
            style="margin-right: 20px"
            >新增</el-button
          > -->
        </div>
        <div class="itemList">
          <div class="listbutton" @click="yaosuHandler">要素</div>
          <el-collapse
            class="collList"
            v-model="activeNames"
            @change="handleChange"
            disabled
          >
            <!-- <el-collapse-item title="要素" name="1">
              <div
                :class="[
                  'listitem',
                  {
                    act:
                      currCate === item.metadataDictyTableId ||
                      currAll === item.metadataDictyTableId,
                  },
                ]"
                v-for="item in leftJiegou"
                :key="item.metadataDictyTableId"
                @click="clickLeftTreeItem(item.metadataDictyTableId, 1)"
              >
                {{ item.metadataDictyTableName }}
              </div>
            </el-collapse-item> -->
            <el-collapse-item title="字典" name="2">
              <!-- <div
                :class="[
                  'listitem',
                  {
                    act:
                      currCate === item.metadataDictyTableId ||
                      currAll === item.metadataDictyTableId,
                  },
                ]"
                v-for="item in leftFeijiegou"
                :key="item.metadataDictyTableId"
                @click="clickLeftTreeItem(item.metadataDictyTableId, 2)"
              >
                {{ item.metadataDictyTableName }}
              </div> -->
              <div
                slot="title"
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <div @click="clickZidianHandler('zidian')">字典</div>
                <div>
                  <el-button
                    class="bin_button"
                    size="small"
                    @click.stop="adddialogshow"
                    icon="el-icon-circle-plus"
                    style="margin-right: 20px"
                    >新增</el-button
                  >
                </div>
              </div>
              <div
                :class="[
                  'listitem',
                  {
                    act: currCate === item || currAll === item,
                  },
                ]"
                v-for="(item, index) in zidianmenu"
                :key="index"
                @click="clickLeftTreeItem(item, 2, 'zidian')"
              >
                {{ item }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="模型" name="3">
              <!-- <div
                :class="[
                  'listitem',
                  {
                    act:
                      currCate === item.metadataDictyTableId ||
                      currAll === item.metadataDictyTableId,
                  },
                ]"
                v-for="item in leftFeijiegou"
                :key="item.metadataDictyTableId"
                @click="clickLeftTreeItem(item.metadataDictyTableId, 2)"
              >
                {{ item.metadataDictyTableName }}
              </div> -->
              <div
                slot="title"
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <div @click="clickmoxingHandler('moxing')">模型</div>
                <div>
                  <el-button
                    class="bin_button"
                    size="small"
                    @click.stop="adddialogshowmodel"
                    icon="el-icon-circle-plus"
                    style="margin-right: 20px"
                  >
                    新增
                  </el-button>
                </div>
              </div>
              <div
                :class="[
                  'listitem',
                  {
                    act: currCate === item || currAll === item,
                  },
                ]"
                v-for="(item, index) in moxingmenu"
                :key="index"
                style="display: flex; justify-content: space-between"
                @contextmenu.prevent="showContextMenu1($event, item)"
                @click="clickLeftTreeItem(item, 2, 'moxing')"
              >
                {{ item.modelName }}
                <div>
                  <i
                    class="el-icon-edit"
                    @click.stop="editmoxing(item)"
                    style="margin-right: 5px; font-size: 16px"
                  >
                  </i>
                  <i
                    class="el-icon-delete"
                    @click.stop="delmoxing(item.id)"
                    style="margin-right: 5px; font-size: 16px"
                  >
                  </i>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div
            v-if="contextMenuVisible"
            class="context-menu"
            :style="{
              top: contextMenuTop + 'px',
              left: contextMenuLeft + 'px',
            }"
          >
            <ul>
              <li @click="handleMenuItemClick('1')">编辑</li>
              <!-- 更多菜单项 -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="itemLefthead1">
        <div class="searchBox" v-if="showtable == 'yaosu'">
          <el-input
            v-model="searchKey"
            class="bin_input"
            placeholder="请输入字段标题描述"
            style="width: 60%"
            v-enter="keywordSearch"
          >
            <template slot="append">
              <el-button class="btn search" @click="keywordSearch">
                全局查询
              </el-button>
            </template>
          </el-input>
        </div>
        <div v-else></div>
        <div class="btn_gro">
          <!-- <el-button
            class="bin_button"
            size="small"
            icon="el-icon-filter1"
            @click="filterShow"
          ></el-button> -->
          <el-button
            class="bin_button calcImport"
            @click="addyuan"
            v-if="showtable == 'yaosu'"
          >
            添加要素
          </el-button>
          <el-button
            class="bin_button calcImport"
            @click="addModelyuansu"
            v-if="showtable == 'moxing'"
          >
            添加要素
          </el-button>
        </div>
      </div>
      <div class="itemList">
        <div
          class="tableBox"
          ref="tableBox"
          v-if="showtable == 'yaosu' || showtable == 'moxing'"
        >
          <el-table
            :border="true"
            ref="multipleTable"
            :data="tableData"
            :fit="true"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableH"
            highlight-current-row
            @current-change="handleCurrentChange"
            class="bin_table"
          >
            <el-table-column resizable type="selection"> </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldAttribute"
              label="属性"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldName"
              label="字段标识"
              sortable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldDescription"
              label="字段名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldType"
              label="数据类型"
              sortable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldLength"
              label="长度"
              sortable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldRange"
              label="域值"
              sortable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              label="是否允许为空"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.isNull == 0 ? "可以为空" : "不可为空" }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              min-width="170"
              label="是否唯一"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.isOnly == 0 ? "不唯一" : "唯一" }}
              </template>
            </el-table-column> -->
            <el-table-column
              min-width="170"
              prop="elementDefinition"
              label="要素说明"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="target"
              label="标签"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="unit"
              label="量纲"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="businessOperationType"
              label="业务操作类型"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="fieldCategory"
              label="所属类别"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="associationDict"
              label="关联字典"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  style="cursor: pointer"
                  @click="jupZd(scope.row.associationDict)"
                >
                  {{ scope.row.associationDict }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="managementUnit"
              label="管理单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="historicalExplanation"
              label="格式说明"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              resizable
              label="操作"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  class="actBtn"
                  @click="editFn(scope.row)"
                  :src="require('../../../assets/edit.png')"
                  v-if="showtable == 'yaosu'"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/record.png')"
                  v-if="showtable == 'yaosu'"
                  @click="recordFn(scope.row)"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/del.png')"
                  v-if="showtable == 'yaosu'"
                  @click="delete1(scope.row)"
                  alt=""
                />
                <img
                  class="actBtn"
                  v-if="showtable == 'moxing'"
                  :src="require('../../../assets/del.png')"
                  @click="deleteBat2(scope.row)"
                  alt=""
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tableBox" ref="tableBox" v-if="showtable == 'zidian'">
          <el-table
            :border="true"
            ref="multipleTable"
            :data="tableData"
            :fit="true"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableH"
            highlight-current-row
            @current-change="handleCurrentChange"
            class="bin_table"
          >
            <el-table-column resizable type="selection"> </el-table-column>
            <!-- <el-table-column
              min-width="170"
              prop="dictName"
              label="字典名称"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
              min-width="170"
              prop="word"
              label="词语"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="170"
              prop="meaning"
              label="含义"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column resizable label="操作" min-width="120">
              <template slot-scope="scope">
                <img
                  class="actBtn"
                  @click="editFn(scope.row)"
                  :src="require('../../../assets/edit.png')"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/record.png')"
                  @click="recordFn(scope.row)"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/del.png')"
                  @click="delete1(scope.row)"
                  alt=""
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageBox">
          <div
            class="btn_grop"
            v-if="showtable == 'zidian' || showtable == 'yaosu'"
          >
            <!-- <el-button class="bin_button" size="small" @click="exprotBat"
              >导出</el-button
            > -->
            <!-- <el-button class="bin_button" size="small" @click="deleteBat"
              >删除</el-button
            > -->
          </div>
          <div class="btn_grop" v-if="showtable == 'moxing'">
            <!-- <el-button class="bin_button" size="small" @click="exprotBat2"
              >导出</el-button
            > -->
            <el-button class="bin_button" size="small" @click="deleteBat2"
              >删除</el-button
            >
          </div>
          <div style="display: flex; align-items: center">
            <!-- <div class="pageInfo">
              <span class="size">{{ pageSize }}</span>
              条每页，共{{ total }}条
            </div> -->
            <el-pagination
              class="bin_fenyeqi"
              :current-page.sync="currPage"
              :page-sizes="[10, 50, 100, 200, 500, 1000]"
              :page-size="allPageSize"
              :pager-count="5"
              prev-text="上一页"
              next-text="下一页"
              layout="total, sizes,->,prev, pager, next"
              popper-class="bin_fenyeqi_popper"
              @current-change="changeYuanPage"
              @size-change="YuanSizeChange"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="编辑"
      :visible.sync="editDialogVisible"
      top="10vh"
      width="800px"
    >
      <edit-dialog
        :currEdit="rowEditData"
        :rowrange="rowrange"
        @cancel="editDialogVisible = false"
        @editCommit="editCommit"
      ></edit-dialog>
    </el-dialog>

    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog"
      title="新建数据库表配置"
      :visible.sync="addDialogVisible"
      top="10vh"
      width="1000px"
    >
      <db-config
        @cancel="hideydb"
        @confirm="addtijiao"
        :moxingmenu="moxingmenu"
      ></db-config>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog"
      top="10vh"
      title="编辑数据库表配置"
      :visible.sync="editzidianDialogVisible"
      width="1000px"
    >
      <editdbConfig
        @cancel="hideydbedit"
        @confirm="bianjitijiao"
        :form="zidianEdit"
      ></editdbConfig>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog"
      title="添加要素"
      top="10vh"
      :visible.sync="addYuanShow"
      width="1000px"
    >
      <add-yuan
        :metadataDictyTableId="currCate"
        @cancel="addYuanShow = false"
        @confirm="addYuanFn"
        :form="zidianEdit"
      ></add-yuan>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="筛选"
      :visible.sync="filterDialogShow"
      top="10vh"
      width="800px"
    >
      <div>
        <div
          class="filterItem"
          v-for="(value, key, index) in filterObj"
          :key="index"
        >
          <template v-if="value.type == 'date' && value.show">
            <el-checkbox-group
              v-model="value.checked"
              class="bin_checkout"
              @change="
                (a) => {
                  filterCheckChange(index, a);
                }
              "
            >
              <el-checkbox> {{ value.name }}：</el-checkbox>
            </el-checkbox-group>
            <el-date-picker
              class="bin_datetime"
              popper-class="bin_datetime_popper"
              v-model="value.value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px !important"
            >
            </el-date-picker>
          </template>
          <template v-if="value.show">
            <el-checkbox-group
              v-model="value.checked"
              class="bin_checkout"
              @change="
                (a) => {
                  filterCheckChange(index, a);
                }
              "
            >
              <el-checkbox> {{ value.name }}：</el-checkbox>
            </el-checkbox-group>
            <el-select
              class="bin_select"
              v-model="value.value"
              placeholder="请选择"
              clearable
              filterable
              style="width: 250px !important"
            >
              <template v-for="(item, index1) in value.options">
                <el-option :key="index1" :label="item" :value="item">
                </el-option>
              </template>
            </el-select>
          </template>
        </div>
      </div>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="filterDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="filterSearch">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="操作记录"
      :visible.sync="recordDialogShow"
      top="10vh"
      width="600px"
    >
      <el-table
        :border="true"
        :data="historyTable"
        tooltip-effect="dark"
        style="width: 100%"
        height="500"
        class="bin_table"
      >
        <el-table-column
          min-width="170"
          resizable
          prop="operatorUser"
          label="操作人"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          resizable
          prop="operatorDate"
          label="操作时间"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          resizable
          prop="operatorMsg"
          label="操作记录"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="recordDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small"> 确认 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-600"
      title="删除"
      :visible.sync="delDialogShow"
      top="10vh"
      width="600px"
    >
      <div style="color: #fff; font-size: 18px">确认删除本条数据吗？</div>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="delDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small"> 确认 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog algorithm_dialog dialog-1000"
      title="算法导入"
      :visible.sync="algorithmDialogShow"
      width="600px"
      top="10vh"
    >
    </el-dialog>

    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1200"
      title="修改模型"
      :visible.sync="editModel"
      top="10vh"
      width="1000px"
    >
      <editmodel
        :name="currEditModel.modelName"
        @cancel="editModel = false"
        @confirm="editModelFn"
      ></editmodel>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="新增模型"
      :visible.sync="addModel"
      top="10vh"
      width="1000px"
    >
      <addmodel @cancel="addModel = false" @confirm="addModelFn"></addmodel>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog"
      title="添加要素"
      top="10vh"
      :visible.sync="tjysModel"
      width="1000px"
    >
      <div class="searchBox">
        <el-input
          v-model="modelSearch"
          class="bin_input"
          placeholder="请输入字段标题描述"
          style="width: 60%"
          v-enter="mlSearch"
        >
          <template slot="append">
            <el-button class="btn search" @click="mlSearch">
              全局查询
            </el-button>
          </template>
        </el-input>
      </div>
      <el-table
        :border="true"
        ref="multipleTable2"
        :data="tableDatamx"
        :fit="true"
        tooltip-effect="dark"
        style="width: 100%"
        :height="tableH"
        :row-key="rowKey"
        highlight-current-row
        @selection-change="handleCurrentChange2"
        class="bin_table"
      >
        <el-table-column resizable type="selection" :reserve-selection="true">
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldAttribute"
          label="属性"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldName"
          label="字段标识"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldDescription"
          label="字段名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldType"
          label="数据类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldLength"
          label="长度"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldRange"
          label="域值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          label="是否允许为空"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isNull == 0 ? "可以为空" : "不可为空" }}
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="170" label="是否唯一" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.isOnly == 0 ? "不唯一" : "唯一" }}
          </template>
        </el-table-column> -->
        <el-table-column
          min-width="170"
          prop="elementDefinition"
          label="要素说明"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="target"
          label="标签"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="unit"
          label="量纲"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="businessOperationType"
          label="业务操作类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="fieldCategory"
          label="所属类别"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="associationDict"
          label="关联字典"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              style="cursor: pointer"
              @click="jupZd(scope.row.associationDict)"
            >
              {{ scope.row.associationDict }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="managementUnit"
          label="管理单位"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          prop="historicalExplanation"
          label="格式说明"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div
        class="pageBox"
        style="
          display: flex;
          align-items: center;
          justify-content: right;
          margin-top: 10px;
        "
      >
        <div class="btn_grop"></div>
        <div style="display: flex; align-items: center">
          <div class="pageInfo">
            <span class="size">{{ pageSize }}</span>
            条每页，共{{ total }}条
          </div>
          <el-pagination
            class="bin_fenyeqi"
            :current-page.sync="currPage2"
            :page-size="10"
            :pager-count="5"
            prev-text="上一页"
            next-text="下一页"
            popper-class="bin_fenyeqi_popper"
            @current-change="changeYuanPage2"
            layout=" prev, pager, next"
            :total="total2"
          >
          </el-pagination>
        </div>
      </div>
      <div class="edit_btns">
        <el-button class="bin_button" size="small" @click="tjysModel = false">
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="submitysFn">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dbConfig from "../../../components/ydbConfig";
import editdbConfig from "../../../components/editydb.vue";
import addmodel from "../../../components/addmodel.vue";
import editmodel from "../../../components/editmodel.vue";
import editDialog from "../../../components/dictEdit";
import addYuan from "../../../components/addYuan";

let NORMAL = "dianjizuoceshu";
let ALLRESULT = "allsearch";
let FILTER = "shaixuan";
export default {
  name: "yuanshujuPage",
  components: {
    dbConfig,
    editDialog,
    addYuan,
    editdbConfig,
    addmodel,
    editmodel,
  },
  data() {
    return {
      modelSearch: "",
      currEditModel: {},
      editModel: false,
      rightSelectItem: null,
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      tableDatamx: [], //添加要素数据
      tjysModel: false, //添加元素
      total2: 0,
      currPage2: 1,
      tableName: "",
      tableStatus: NORMAL,
      ALLRESULT: "allsearch",
      searchKey: "",
      // activeNames: ["1", "2"],
      activeNames: "",
      currAll: "",
      currAll2: "",
      addDialogVisible: false,
      filterDialogShow: false,
      editDialogVisible: false,
      editzidianDialogVisible: false,
      addModel: false,
      addYuanShow: false,
      currEdit: {},
      currCate: "",
      dataBaseType: "",
      pageSize: 10,
      allPageSize: 10,
      currPage: 1,
      total: 0,
      hisCurrPage: 1,
      hisPageSize: 10,
      hisTotal: 0,
      rowEditData: {},
      zidianEdit: {},
      recordDialogShow: false,
      delDialogShow: false,
      algorithmDialogShow: false,
      leftJiegou: [],
      leftFeijiegou: [],
      tableHeader: [],
      tableData: [],
      filterObj: {
        column_code: {
          name: "字段",
          options: [],
          value: "",
          checked: [],
          show: true,
          columnName: "columnCode",
        },
        column_unit: {
          name: "单位",
          options: [],
          value: "",
          checked: [],
          show: true,
          columnName: "columnUnit",
        },
        column_meaning: {
          name: "含义",
          options: [],
          value: "",
          checked: [],
          show: true,
          columnName: "columnMeaning",
        },
        column_type: {
          name: "数据类型",
          options: [],
          value: "",
          checked: [],
          show: true,
          columnName: "columnType",
        },
        column_name: {
          name: "表单条目",
          options: [],
          value: "",
          checked: [],
          show: true,
          columnName: "columnName",
        },
        column_required: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
          columnName: "columnRequired",
        },
        create_user: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
        table_link: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
        create_time: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
        column_display: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
        modify_user: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
        modify_time: {
          name: "xxx",
          options: [],
          value: "",
          checked: [],
          show: false,
        },
      },
      currentRow: null,
      historyTable: [],
      tableH: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        searchContent: "",
      },
      queryzidian: {
        pageNum: 1,
        pageSize: 10,
        dictName: "",
      },
      querymoxing: {
        modelId: "",
        pageNum: 1,
        pageSize: 10,
      },
      rowrange: "",
      zidianmenu: [],
      showtable: "yaosu",
      moxingmenu: [],
      addmodeldata: "",
    };
  },
  directives: {
    enter: {
      inserted(el, binding) {
        el.addEventListener("keyup", (event) => {
          if (event.key === "Enter") {
            binding.value();
          }
        });
      },
    },
  },
  created() {
    const routeShow = this.$route.query.show;
    if (routeShow == "zidian") {
      this.showtable = routeShow;
      this.getNewyaosuList();
      this.getzidianmenu(1);
      this.getmoxingmenu();
    } else if (routeShow == "moxing") {
      this.showtable = routeShow;
      this.getNewyaosuList();
      this.getzidianmenu();
      this.getmoxingmenu(1);
    } else {
      this.getNewyaosuList();
      this.getzidianmenu();
      this.getmoxingmenu();
    }
  },
  mounted() {
    this.fetTableHeight();
    this.getLeftTree();
    const routeShow = this.$route.query.show;
    if (routeShow == "zidian") {
      this.activeNames = ["2"];
    } else if (routeShow == "moxing") {
      this.activeNames = ["3"];
    }
  },
  methods: {
    rowKey(row) {
      return row.id;
    },
    editmoxing(item) {
      this.currEditModel = item;
      this.editModel = true;
    },
    delmoxing(id) {
      this.$confirm("确认删除本条模型吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let parmas = {
          modelId: id,
        };
        this.$api.deleteModel(parmas).then((res) => {
          if (res.code == "200") {
            this.getmoxingmenu();
            console.log(this.currCate, id);
            if (this.currCate.id == id) {
              this.tableData = [];
            }
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
      });
    },
    filterCheckChange() {
      console.log(this.filterObj);
    },
    getTableName(id) {
      return this.leftJiegou
        .concat(this.leftFeijiegou)
        .filter((e) => id === e.metadataDictyTableId)[0].metadataDictyTableName;
    },
    handleCurrentChange(val) {
      if (this.tableStatus == ALLRESULT) {
        this.currAll = val.metadataDictyTableId;
      }
    },
    changeYuanPage(val) {
      if (this.showtable == "yaosu") {
        this.query.pageNum = val;
        this.getNewyaosuList();
      } else if (this.showtable == "zidian") {
        this.queryzidian.pageNum = val;
        this.getzidianHandler(this.currCate);
      } else if (this.showtable == "moxing") {
        this.querymoxing.pageNum = val;
        this.getModelData(this.currCate.id);
      }
      // if (this.tableStatus == NORMAL) {
      //   this.leftTreeGetTable();
      // } else if (this.tableStatus == ALLRESULT) {
      //   this.search();
      // } else if (this.tableStatus == FILTER) {
      //   this.filter1();
      // }
    },
    YuanSizeChange(val) {
      this.allPageSize = val;
      if (this.showtable == "yaosu") {
        this.query.pageNum = 1;
        this.query.pageSize = val;
        this.getNewyaosuList();
      } else if (this.showtable == "zidian") {
        this.queryzidian.pageNum = 1;
        this.queryzidian.pageSize = val;
        this.getzidianHandler(this.currCate);
      } else if (this.showtable == "moxing") {
        this.querymoxing.pageNum = 1;
        this.querymoxing.pageSize = val;
        this.getModelData(this.currCate.id);
      }
    },
    hideydb() {
      this.addDialogVisible = false;
    },
    hideydbedit() {
      this.editzidianDialogVisible = false;
    },
    //添加要素
    addYuanFn(form) {
      // this.$api.insertRecord(form).then((res) => {
      //   this.$message({
      //     message: res.message,
      //     type: "success",
      //   });
      //   this.addYuanShow = false;
      //   this.leftTreeGetTable();
      // });
      this.$api.addyaosu(form).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.addYuanShow = false;
        this.leftTreeGetTable();
        this.getNewyaosuList();
      });
    },
    editModelFn(form) {
      let editForm = {
        ...this.currEditModel,
        ...form,
      };
      this.$api.editModelName(editForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.editModel = false;
          this.getmoxingmenu();
        }
      });
    },
    addModelFn(form) {
      this.$api.createModel(form).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.addModel = false;
        this.getmoxingmenu();
      });
    },
    //新建字典表
    addtijiao(form) {
      // this.$api.addMetadataDicty(form).then((res) => {
      //   if (res.code == 200) {
      //     // 成功提示
      //     this.$message({
      //       message: res.message,
      //       type: "success",
      //     });
      //     this.hideydb();
      //     // 重新获取 getAllTree
      //     if (this.tableStatus == NORMAL) {
      //       this.getLeftTree();
      //     } else if (this.tableStatus == ALLRESULT) {
      //       this.search();
      //     } else if (this.tableStatus == FILTER) {
      //       this.filter1();
      //     }
      //   }
      // });
      this.$api.createzidian(form).then((res) => {
        if (res.code == 200) {
          // 成功提示
          this.$message({
            message: res.message,
            type: "success",
          });
          this.addDialogVisible = false;
          this.getzidianmenu();
          this.getzidianHandler(this.tableName);
          // this.hideydb();
          // // 重新获取 getAllTree
          // if (this.tableStatus == NORMAL) {
          //   this.getLeftTree();
          // } else if (this.tableStatus == ALLRESULT) {
          //   this.search();
          // } else if (this.tableStatus == FILTER) {
          //   this.filter1();
          // }
        }
      });
    },
    bianjitijiao(form) {
      this.$api.updatezidian(form).then((res) => {
        if (res.code == 200) {
          this.editzidianDialogVisible = false;
          // 成功提示
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getzidianmenu();
          this.getzidianHandler(this.tableName);
        }
      });
    },
    handleMenuItemClick(v) {
      if (v == 1) {
      }
      this.contextMenuVisible = false;
    },
    showContextMenu1() {},
    showContextMenu(event, rightSelectItem) {
      event.preventDefault();

      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      if (this.rightSelectItem?.dataTableId !== rightSelectItem.id) {
        this.rightSelectItem = rightSelectItem;
      }
      this.contextMenuVisible = true;

      setTimeout(() => {
        this.contextMenuVisible = false;
      }, 2000);
    },
    clickLeftTreeItem(tableId, type, dict) {
      this.allPageSize = 10;
      console.log(tableId, "tableId");
      // getModelData
      if (dict == "zidian") {
        this.tableName = tableId;
        this.queryzidian.pageNum = 1;
        this.queryzidian.pageSize = 10;
        this.clickZidianHandler(tableId);
        this.currCate = tableId;
        this.dataBaseType = type;
        this.currPage = 1;
        this.searchKey = "";
        this.currAll = "";
        this.tableStatus = NORMAL;
      } else if (dict == "moxing") {
        this.showtable = "moxing";
        this.querymoxing.pageNum = 1;
        this.querymoxing.pageSize = 10;
        this.getModelData(tableId.id);
        this.currCate = tableId;
        this.dataBaseType = type;
        this.currPage = 1;
        this.searchKey = "";
        this.currAll = "";
        this.tableStatus = NORMAL;
      }

      // this.leftTreeGetTable();
    },
    leftTreeGetTable() {
      if (this.currCate) {
        this.$api
          .findByTableId({
            metadataDictyTableId: this.currCate,
            pageNum: this.currPage,
            pageSize: this.pageSize,
          })
          .then((res) => {
            this.tableData = res.result.content;
            this.total = res.result.totalSize;
          });
      }
    },
    filterSearch() {
      this.currPage = 1;
      this.tableStatus = FILTER;
      this.filter1();
    },
    filter1() {
      let filterCondition = {};
      for (const key in this.filterObj) {
        if (Object.hasOwnProperty.call(this.filterObj, key)) {
          if (this.filterObj[key].checked.length) {
            filterCondition[this.filterObj[key].columnName] =
              this.filterObj[key].value;
          }
        }
      }
      this.$api
        .findByTableId({
          metadataDictyTableId: this.currCate,
          pageNum: this.currPage,
          pageSize: this.pageSize,
          ...filterCondition,
        })
        .then((res) => {
          this.filterDialogShow = false;
          this.tableData = res.result.content;
          this.total = res.result.totalSize;
        });
    },
    getLeftTree() {
      this.$api.getAllTree({}).then((res) => {
        this.leftJiegou = res.result["结构化"];
        this.leftFeijiegou = res.result["非结构化"];
      });
    },
    handleChange() {},
    exprotBat() {
      let selected = this.$refs.multipleTable.selection;
      if (selected.length) {
        this.$api
          .downloadColInfo({
            metadataDictyColIds: selected.map((e) => e.metadataDictyColId),
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "导出成功",
                type: "success",
              });
            }
          });
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    deleteBat() {
      let selected = this.$refs.multipleTable.selection;
      if (selected.length) {
        this.$confirm(`确认删除选中的${selected.length}条数据吗？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api
              .removeByIdsRecord(selected.map((e) => e.metadataDictyColId))
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  this.leftTreeGetTable();
                }
              });
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },

    // 添加要素
    addyuan() {
      this.addYuanShow = true;
      // if (!this.currCate) {
      //   // 提示用户选择一个表
      //   this.$message({
      //     message: "请从左侧列表中选择一个表",
      //     type: "warning",
      //   });
      // } else {
      //   this.addYuanShow = true;
      // }
    },
    filterShow() {
      console.log(this.filterObj);
      if (!this.currCate) {
        // 提示用户选择一个表
        this.$message({
          message: "请从左侧列表中选择一个表",
          type: "warning",
        });
      } else {
        this.$api
          .findByTableIdQueryCondition({ metadataDictyTableId: this.currCate })
          .then((res) => {
            if (res.code == 200) {
              this.filterDialogShow = true;
              for (const key in res.result) {
                if (Object.hasOwnProperty.call(res.result, key)) {
                  this.filterObj[key].options = res.result[key];
                }
              }
            }
            console.log(res);
          });
      }
    },
    adddialogshow() {
      this.addDialogVisible = true;
    },
    adddialogshowmodel() {
      this.addModel = true;
    },
    editFn(row) {
      if (this.showtable == "yaosu") {
        this.$api.searchyaosuList(row.id).then((res) => {
          const { code, result } = res;
          if (code == 200) {
            // this.rowrange = result.fieldRange
            this.rowEditData = JSON.parse(JSON.stringify(result));
          }
        });
        // 深拷贝对象
        // this.rowEditData = JSON.parse(JSON.stringify(row));
        this.editDialogVisible = true;
      } else if (this.showtable == "zidian") {
        this.zidianEdit = JSON.parse(JSON.stringify(row));
        this.editzidianDialogVisible = true;
      }
    },
    editCommit(editRow) {
      console.log(editRow);
      // this.$api.updateByIdRecord(editRow).then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     // 成功提示
      //     this.$message({
      //       message: res.message,
      //       type: "success",
      //     });
      //     // 关弹窗
      //     this.editDialogVisible = false;
      //     // 重新获取数据
      //     this.leftTreeGetTable();
      //   }
      // });
      this.$api.updateyaosu(editRow).then((res) => {
        if (res.code == 200) {
          // 成功提示
          this.$message({
            message: res.message,
            type: "success",
          });
          // 关弹窗
          this.editDialogVisible = false;
          // 重新获取数据
          this.getNewyaosuList();
          this.leftTreeGetTable();
        }
      });
    },
    recordFn(row) {
      this.$api.getColHisById2({ metadataDictyColId: row.id }).then((res) => {
        if (res.code == 200) {
          this.historyTable = res.result;
          this.recordDialogShow = true;
        }
      });
    },
    delete1(row) {
      console.log(row, "delete1");
      // this.delDialogShow = true;
      this.$confirm("确认删除本条数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$api.removeByIdRecord(row.metadataDictyColId).then((res) => {
          //   if (res.code == 200) {
          //     this.$message({
          //       message: "删除成功",
          //       type: "success",
          //     });
          //     this.leftTreeGetTable();
          //   }
          // });
          if (this.showtable == "yaosu") {
            this.$api.deleteyaosu(row.id).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getNewyaosuList();
              }
            });
          } else if (this.showtable == "zidian") {
            this.$api.deletezidian([row.id]).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getzidianmenu();
                this.getzidianHandler(this.tableName);
              }
            });
          }
        })
        .catch(() => {});
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH = this.$refs.tableBox.getBoundingClientRect().height - 10;
      });
    },
    keywordSearch() {
      this.currPage = 1;
      this.tableStatus = ALLRESULT;
      this.currCate = "";
      // this.search();
      this.query.pageNum = 1;
      this.getNewyaosuList();
    },
    search() {
      this.$api
        .findBySearchContent({
          searchContent: this.searchKey,
          pageNum: this.currPage,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.tableData = res.result.content;
          this.total = res.result.totalSize;
        });
    },
    exprotModelFn() {},
    //跳转字典
    jupZd(val) {
      this.tjysModel = false;
      this.activeNames = "2";
      this.currCate = val;
      this.tableName = val;
      this.queryzidian.pageNum = 1;
      this.clickZidianHandler(val);
      this.currCate = val;
      this.currPage = 1;
      this.searchKey = "";
      this.currAll = "";
    },
    // 获取要素列表
    getNewyaosuList() {
      this.query.searchContent = this.searchKey;
      this.$api.getyaosuList(this.query).then((res) => {
        console.log(res.result.content, "res.result.content");
        this.tableData = res.result.content;
        this.total = res.result.totalSize;
      });
    },
    //点击要素
    yaosuHandler() {
      this.currPage = 1;
      this.query.pageNum = 1;
      this.showtable = "yaosu";
      this.getNewyaosuList();
    },
    //点击字典
    clickZidianHandler(name) {
      this.showtable = "zidian";
      this.getzidianHandler(name);
    },
    clickmoxingHandler() {
      this.showtable = "moxing";
    },
    searchyaosuHandler() {
      this.$api.searchyaosuList().then((res) => {});
    },
    //添加要素
    addyaosuHandler() {
      this.$api.addyaosu().then((res) => {});
    },
    // 获取字典菜单
    getzidianmenu(autoInto) {
      this.$api.zidianmenu().then((res) => {
        const { code, result } = res;
        console.log(res, "modelName");
        if (code == 200) {
          this.zidianmenu = result;
          if (
            autoInto &&
            typeof result === "object" &&
            result instanceof Array &&
            result.length
          ) {
            this.clickLeftTreeItem(result[0], 2, "zidian");
          }
        }
      });
    },
    // 字典列表
    getzidianHandler(name) {
      this.queryzidian.dictName = name;
      this.$api.getzidianList(this.queryzidian).then((res) => {
        this.tableData = res.result.content;
        this.total = res.result.totalSize;
        // if (res.result.content.length == 0) {
        //   if (this.zidianmenu[0]) {
        //     this.getzidianHandler(this.zidianmenu[0]);
        //     this.currCate = this.zidianmenu[0];
        //   } else {
        //     this.tableData = [];
        //   }
        // }else{
        //   this.currCate = this.zidianmenu[0];
        // }
      });
    },
    // 获取模型菜单
    getmoxingmenu(autoInto) {
      this.$api.moxingmenu().then((res) => {
        const { code, result } = res;
        if (code == 200) {
          this.moxingmenu = result;
          if (
            autoInto &&
            typeof result === "object" &&
            result instanceof Array &&
            result.length
          ) {
            this.clickLeftTreeItem(result[0], 2, "moxing");
          }
        }
      });
    },
    // 获取模型数据
    getModelData(id) {
      this.querymoxing.modelId = id;
      this.$api.modelData(this.querymoxing).then((res) => {
        const { code, result } = res;
        console.log(result);
        if (code == 200) {
          this.tableData = res.result.content;
          this.total = res.result.totalSize;
        }
      });
    },
    //添加元素
    addModelyuansu() {
      this.tjysModel = true;
      this.mxtjyslist();
    },
    mlSearch() {
      this.mxtjyslist();
    },
    mxtjyslist() {
      let obj = {
        pageNum: this.currPage2,
        pageSize: 10,
        searchContent: this.modelSearch,
      };
      this.$api.getyaosuList(obj).then((res) => {
        this.tableDatamx = res.result.content;
        this.total2 = res.result.totalSize;
      });
    },
    //提交元素
    submitysFn() {
      let obj = {
        id: this.querymoxing.modelId,
        elementIds: this.currAll2,
      };
      this.$api.addMetadataModelElement(obj).then((res) => {
        this.tjysModel = false;
        this.getModelData(this.querymoxing.modelId);
      });
    },
    // 删除模型
    deletemoxing(row) {},
    exprotBat2() {
      let selected = this.$refs.multipleTable.selection;
      if (selected.length) {
        this.$api
          .downloadColInfo({
            metadataDictyColIds: selected.map((e) => e.metadataDictyColId),
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "导出成功",
                type: "success",
              });
            }
          });
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    deleteBat2(row) {
      let selected = [];
      console.log(this.$refs.multipleTable.selection, "11111");
      if (row.id) {
        selected = [row.correlationId];
      } else {
        selected = this.$refs.multipleTable.selection.map((res) => {
          return res.correlationId;
        });
      }
      if (selected.length) {
        this.$confirm(`确认删除选中的${selected.length}条数据吗？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api.deleteModelElement(selected).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getModelData(this.querymoxing.modelId);
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    //添加元素分页
    changeYuanPage2(val) {
      this.pageNum2 = val;
      this.addModelyuansu();
    },
    handleCurrentChange2(val, row) {
      this.currAll2 = val.map((res) => {
        return res.id;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
.edit_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.database_wrap {
  width: 100%;
  height: 100%;
  --left-width: 20%;
  --head-title: 50px;

  .itemLefthead {
    width: 100%;
    display: flex;
    height: var(--head-title);
    background: rgba(2, 255, 244, 0.15);
    border-radius: 0px 0px 0px 0px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 59px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-indent: 31px;
    position: relative;
    align-items: center;
    justify-content: space-between;

    &::before {
      width: 5px;
      height: 20px;
      background: #02fff4;
      border-radius: 0px 0px 0px 0px;
      position: absolute;
      left: 20px;
      top: 16px;
      content: "";
    }

    .addBtn {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/addjia.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }

    .calcImport {
      text-indent: 24px;
      margin-right: 20px;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/expot.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 10px;
        content: "";
      }
    }
  }

  .left {
    height: 100%;
    width: 20%;
    float: left;

    .itemLeft {
      width: 100%;
      height: 100%;
      background: rgba(2, 82, 107, 0.6);
      border: 1px solid #02fff4;

      .itemList {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 50px);
        overflow: scroll;

        .listbutton {
          padding-left: 16px;
          font-weight: 400;
          font-size: 18px;
          background: rgba(2, 255, 244, 0.1);
          color: #a2fffb;
          border: 1px solid #02fff4;
          margin-bottom: 10px;
          box-shadow: inset 0px 0px 25px 1px #02fff4;
          border-radius: 5px;
          display: flex;
          align-items: center;
          height: 48px;
          line-height: 48px;
          cursor: pointer;
        }

        ::v-deep .collList {
          border: none;

          .el-collapse-item__header {
            padding-left: 16px;
            font-weight: 400;
            font-size: 18px;
            background: rgba(2, 255, 244, 0.1);
            color: #a2fffb;
            border: 1px solid #02fff4;
            margin-bottom: 10px;
            box-shadow: inset 0px 0px 25px 1px #02fff4;
            border-radius: 5px;
          }

          .el-collapse-item__wrap {
            background-color: transparent;
            border-bottom: none;

            .listitem {
              width: 100%;
              box-sizing: border-box;
              cursor: pointer;
              color: #fff;
              padding: 0 16px;
              background-color: #031722;
              margin-bottom: 10px;
              box-sizing: border-box;
              height: 40px;
              line-height: 40px;
              border: 1px solid transparent;

              &.act {
                border: 1px solid #02fff4;
              }
            }
          }
        }
      }
    }
  }

  .right {
    .itemLefthead1 {
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      height: 80px;

      .btn_gro {
        display: flex;

        .btn1 {
        }
      }
    }

    height: 100%;
    width: calc(100% - var(--left-width) - 20px);
    float: right;

    .itemList {
      background: rgba(2, 82, 107, 0.6);
      border: 1px solid #02fff4;
      width: 100%;
      height: calc(100% - 80px);
      padding: 20px;
      box-sizing: border-box;

      .tableBox {
        height: calc(100% - 45px);

        .docImg {
          width: 20px;
          height: 25px;
        }
      }

      .actBtn {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }

      .pageBox {
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bin_fenyeqi {
          display: block !important;
          width: 100%;
        }

        .pageInfo {
          height: 18px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
          font-style: normal;
          text-transform: none;

          .size {
            color: #02fff4;
          }
        }
      }
    }

    .addBtnexport {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/exporticon.png") center center
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }
  }
  .searchBox {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;

    ::v-deep .el-input-group__append,
    .el-input-group__prepend {
      background-color: transparent;
      border: none;
    }
  }
  .btn {
    width: auto;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: inset 0px 0px 15px 1px #02fff4;
    background-color: transparent;
    outline: none;
    border: 1px solid #02fff4;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    position: relative;
  }
  .algorithm_dialog {
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }

  .setDialog {
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }

  .filterItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
}

.pageInfo {
  height: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
